<script >
import {reactive, defineComponent, h, ref } from 'vue'
import {Greet, Log, ListKeys} from '../../wailsjs/go/main/App'
import { useMessage, NButton } from 'naive-ui'
import { EditTableColumn } from '@/components/EditTableColumn.vue'

const message = useMessage()

function createColumns({ play }) {
  return [
    {title:"编号", key:"id"},
    { title: "键", key: "key" },
    { title: "类型", key: "key_type" },
    { title: "值", key: "value" },
    { title: "备注", key: "remark" },
    {
      title: "操作", key: "actions",
      render(row) {
        return h(
                EditTableColumn,
                {
                  strong: true,
                  tertiary: true,
                  size: "small",
                  onEdit: () => play(row),
                  onDelete:() => { Log("on delete")},
                },
                { default: () => "edit" }
        );
      }
    }
  ];
}

const data = ref([
  {"key":"def", "remark":"todo", "key_type":"string"},
])

const loadKeys =() => {
  ListKeys().then((result) => {
    // data.keys = JSON.parse(result);
    data.value = JSON.parse(result);

    Log("load keys" + JSON.stringify(data));
  });
};

export default defineComponent({
  setup() {
    Log("set up");

    return {
      data,
      columns: createColumns({
        play(row) {
          Log("play click");
          loadKeys();
        }
      }),
      pagination: false,

      greet() {
        Log("button click");
        loadKeys();
      }

    };
  }
});

</script>


<template>
  <main>

    <n-button type="info" @click="greet"> Greet </n-button>

    <n-data-table
            :columns="columns"
            :data="data"
            :pagination="pagination"
            :bordered="false"
            style="width:100%;height:100%"
    />

  </main>
</template>

<style scoped>
.result {
  height: 20px;
  line-height: 20px;
  margin: 1.5rem auto;
}
.input-box {
  text-align: center;
}
.input {
  width: 200px;
  margin-right: 10px;
}
</style>

<!--
    <div class="result">{{ data.resultText }}</div>
    <div class="input-box">
      <n-input v-model:value="data.name" type="text" placeholder="input name" class="input"/>
    </div>

    <n-table :bordered="false" :single-line="false">
      <thead>
      <tr>
        <th>Abandon</th>
        <th>Abnormal</th>
        <th>Abolish</th>
        <th>...</th>
        <th>万事开头难</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>放弃</td>
        <td>反常的</td>
        <td>彻底废除</td>
        <td>...</td>
        <td>干！我刚才背的是啥</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
      </tr>
      </tbody>
    </n-table>
-->
